<%--
  Created by IntelliJ IDEA.
  User: zzz
  Date: 2020/2/4
  Time: 15:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
</head>
<body>

<div class="card">
    <div class="card-body">
        <h5 class="card-title"><span>商品浏览图</span>  <button style="margin-left: 10px;" onclick="setView()" type="button" class="btn btn-info bt-sm" data-toggle="modal" data-target="#view"><i class="fa fa-cloud-upload"></i></button></h5>
        <div id="viewList" class="row">
        </div>
    </div>
</div>


<div class="modal fade bd-example-modal-lg" id="view" tabindex="-1" role="dialog" aria-labelledby="viewTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="viewTitle">添加商品浏览图</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true"  onclick="insertView()">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <label class="col-form-label">请上传商品浏览图:</label>
                <form action="${APP_PATH}/view/viewUpload" class="dropzone"></form>
            </div>
            <div class="modal-footer">
                <button onclick="insertView()" type="button" class="btn btn-primary" data-dismiss="modal">ojbk</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>


    function insertView() {
        var f;
        f = $("#view").find(".dz-image").html();
        if(f != undefined){
            $.ajax({
                url : "${APP_PATH}/view/insertView",
                method : "POST",
                data : {
                    fid : ${requestScope.furniture.fid}
                },
                success : function (result) {
                    if(result.success){
                        swal("上传成功！", {icon: "success"}).then((value) => {
                            myDropzone.removeAllFiles();
                        getViewList();
                    });
                    }else{
                        swal("上传失败！", {icon: "error"});
                    }
                }
            });
        }
    }

    function deleteView(vid) {
        $.ajax({
            url : "${APP_PATH}/view/deleteView/"+vid,
            method : "POST",
            data : {
                _method : "DELETE",
                fid : ${requestScope.furniture.fid},
                vid : vid
            },
            success : function () {
                getViewList();
            }
        });
    }

    function getViewList() {
        $.ajax({
            url : "${APP_PATH}/furniture/getFurnitureDetail",
            method : "POST",
            data : {
                fid : ${requestScope.furniture.fid}
            },
            beforeSend : function () {
                var viewContent = "";
                viewContent += '<div style="margin: auto 0; margin-left: 570px;" class="spinner-grow text-info" role="status">';
                viewContent += '<span class="sr-only"></span>';
                viewContent += '</div>';
                $("#viewList").html(viewContent);
            },
            success : function (result) {
                if(result.success){
                    var viewList = result.data.viewList;
                    var viewContent = "";
                    if(viewList.length == 0){
                        viewContent += '<div style=" margin : 0 auto;" class="col-md-2 m-b-15"><img src="${APP_PATH}/img/nodata5.png" class="img-fluid" alt="..."></div>';
                    }else{
                        for(var i = 0; i < viewList.length; i++){
                            viewContent += '<div class="col-md-2 m-b-15">';
                            viewContent += '<button onclick="deleteView('+viewList[i].vid+')" style="position: absolute; top: -15px; right: -2px; z-index: 100;" type="button"  class="btn btn-danger btn-floating delete"><i class="ti-trash"></i></button>';
                            viewContent += '<a class="image-popup-gallery-item" href="${APP_PATH}/'+viewList[i].vphoto+'"><img src="${APP_PATH}/'+viewList[i].vphoto+'" class="img-fluid" alt="..."></a>';
                            viewContent += '</div>';
                        }
                    }
                    $("#viewList").html(viewContent);
                    render();
                }
            },
            complete : function () {
                getFurnitureDetail();
            }
        });
    }
</script>
